<!--
 * @Description: 
 * @Author: nxd
 * @Date: 2023-01-01 19:11:59
 * @LastEditors: nxd
 * @LastEditTime: 2023-02-12 15:20:46
-->
<template>
  <div class="table">
    <div class="about">
      <var-app-bar :elevation="false" color="white" title="关于数字学院" title-position="center" text-color="#000000">
        <template #left>
          <var-button @click="resetup" color="transparent" text-color="#ffffff" round text>
            <var-icon color="#D3D3D3" name="chevron-left" :size="24" />
          </var-button>
        </template>
      </var-app-bar>
    </div>
    <var-image src="./img/logo.png" alt="" class="img" />
    <var-app-bar :elevation="false" @click="center = true" color="white" title="隐私政策" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <var-popup class="popup" v-model:show="center">
      <div class="popup-example-block">
       <div class="title">使用协议与隐私政策</div>
        <div class="content">
           <div>欢迎来到云课堂。</div>
         <div class="text">
            <span
              class="first">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了更透明的呈现数字学院收集和使用您的个人信息的情况，数字学院根据业务实际情况更新了</span>
           <span class="info">《数字学院平台服务协议》</span>
           <span>、</span>
            <span class="info">《数字学院隐私协议》</span>
            <span>，特向您推送本提示。</span>
            <div>请您仔细阅读并充分理解相关条款、如您同意本隐私政策内容，请点击“同意”开始使用我们的产品服务。</div>
           <div>在仅浏览模式下，我们可能会申请系统设备收集设备信息、日志信息、用于信息推送和安全风控、并申请存储权限、用于下载及缓存相关文件。
            </div>
            </div>

          </div>
        <div class="agree">
         <var-button type="primary" class="agreeBtn"
            @click="agreeClick">同意</var-button>
          </div>
        
        </div>
      </var-popup>
    <var-app-bar :elevation="false" @click="center = true" color="white" title="用户协议" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
  </div>
</template>


<script setup lang="ts">
import router from '../../../router/index'
import { reactive, ref } from 'vue'
function resetup() {
  router.push('/setup')
  console.log('返回个人设置页');

};
const center = ref(false)
const agreeClick = () => {
  center.value = false
}
// 仅浏览
const scanClick = () => {
  center.value = false
}
// 不同意勾选 
const disagreeClick = () => {
  center.value = false
}
</script>

<style lang="less" >
.table {
  .about {
    .var-app-bar {
      height: 60px;
    }

    .var-app-bar__title {
      font-weight: 500;
      font-size: 18px
    }
  }

  .img {
    width: 390px;
    height: 200px;
    border: 0px;
    display: flex;

  }
  .popup {
            border-radius: 20px;

            .popup-example-block {
                padding: 20px 24px;
                height: 560px;
                width: 300px;

                .title {
                    font-size: 20px;
                    font-weight: bolder;
                    text-align: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }

                .content {
                    margin-bottom: 20px;
                    font-size: 15px;
                    color: rgb(129, 129, 129);

                    .text {
                        .first {
                            text-indent: 2em;
                            margin: 0;
                            padding: 0;
                        }

                        .info {
                            color: rgb(38, 89, 247);
                        }
                    }
                }

                .agree {
                    text-align: center;
                    margin-bottom: 15px;

                    .agreeBtn {
                      margin-top: 60px;
                        font-weight: bolder;
                        --button-border-radius: 25px;
                        --button-normal-height: 45px;
                        --button-normal-padding: 0 100px;
                        --button-primary-color: rgb(38, 89, 247);
                    }
                }

                .scan {
                    text-align: center;
                    margin-bottom: 15px;

                    .scanBtn {
                        font-weight: bolder;
                        --button-border-radius: 25px;
                        --button-normal-height: 45px;
                        --button-normal-padding: 0 100px;
                        --button-primary-color: rgb(155, 158, 180);
                    }
                }

                .disagree {
                    font-weight: bolder;
                    text-align: center;
                    color: rgb(168, 172, 190);
                }
            }
        }
}
</style>